<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <el-date-picker
        style="width:235px"
        unlink-panels
        :clearable="false"
        :picker-options="pickerOptionArr[index]"
        v-model="item.data"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button
        size="mini"
        style="margin-left:5px"
        icon="el-icon-minus"
        v-if="list.length > 1"
        @click="deleteDate(index)"
      ></el-button>
      <el-button
        size="mini"
        style="margin-left:0px"
        type="success"
        icon="el-icon-plus"
        :disabled="!item.data"
        v-if="index == list.length - 1"
        @click="addDate(index)"
      ></el-button>
    </div>
    <!-- <NexStep2 />
    <NexStep1 /> -->
  </div>
</template>

<script>
// import NexStep1 from "./nextstepimg1";
// import NexStep2 from "./nextstepimg2";
export default {
  data() {
    return {
      list: [
        {
          data: ""
        }
      ],
      pickerOptionArr: [{}]
    };
  },
  components: {
    // NexStep1,
    // NexStep2,
  },
  methods: {
    addDate(index) {
      let _this = this;
      let endDate = _this.list[index].data[1];

      this.pickerOptionArr.splice(index + 1, 0, {
        disabledDate: time => {
          if (endDate)
            return time.getTime() < new Date(endDate).getTime() - 86400000; // -86400000是可以取当天日期,当天不允许重叠的话可以去掉
        }
      });
      this.list.splice(index + 1, 0, { data: "", status: "" });
    },

    deleteDate(index) {
      let len = this.list.length;
      // 当长度小于3时忽视
      if (index == len - 2 && len > 2) {
        // 删除倒数第二条
        if (!this.list[len - 1].data) {
          // 且最后一条没数据 则需要给倒数第二条加disabledDate 默认是无disabledDate
          let endDate = this.list[index - 1].data[1];
          this.pickerOptionArr[len - 2] = {
            disabledDate: time => {
              if (endDate)
                return time.getTime() < new Date(endDate).getTime() - 86400000; // -86400000是可以取当天日期,当天不允许重叠的话可以去掉
            }
          };
        }
      }
      // 添加完规则后再删除数据
      if (index == 0) {
        this.pickerOptionArr.shift(); // 首条数据删除 后面数据的规则不变
      } else {
        this.pickerOptionArr.pop(); // 其他位置数据删除，后面数据的规则往前移一条
      }
      this.list.splice(index, 1);
    }
  }
};
</script>

<style></style>
